<template>
    <!--帖子模块-->
    <div class="mssage">
        <div class="messageTitle">
            <h1>{{message.message.message_title}}</h1>
        </div>
        <div class="messageInfo">
            <ul>
                <li style="color: black;" class="flex-center">
                    <img   :src="message.user.user_avatar" alt="头像">
                    {{message.user.username}}
                </li>
                <li>
                    <i class="el-icon-time"></i>
                    于{{ message.message.message_publish_time }}发布
                </li>
                <li>
                    <i class="el-icon-view"></i>
                    阅读量 {{ message.message.message_browse }}
                </li>
                <li>
                    <i class="iconfont icon-dianzan"></i>
                    点赞数 {{ message.message.message_like }}
                </li>
            </ul>
        </div>
        <div class="messageContent">{{message.message.message_content}}</div>
        <div class="messageFonter">
            <div class="flex-center" style="margin-left: 30px; font-size:18px;">
                <img  :src="message.user.user_avatar" alt="头像">
                {{message.user.username}}
                <!-- 关注按钮，按需展示  自己不是发帖人展示-->
                <!--关注按钮，已关注禁用-->
                <el-button v-show="userid != message.user.userid" :disabled="Boolean(isAttend)" 
                round  style="width: 80px; height: 30px"
                @click.once="addAtteontion(message.message.message_userid)">
                <!-- 关注按钮文字，按需展示，已关注发帖人禁用按钮 -->
                    <i class="el-icon-plus"></i><span>{{isAttend?'已关注':'关注'}}</span>
                </el-button>
            </div>
            <ul>
                <li>
                    <i class="iconfont icon-dianzan" @click.once="addLike(message.message.message_id)"></i>
                    {{ message.message.message_like }}
                </li>
                <li>
                    <i class="iconfont icon-cai" @click.once="addUnlike(message.message.message_id)"></i>
                    {{ message.message.message_unlike }}
                </li>
                <li style="margin-right: 50px;">
                    <i class="el-icon-s-comment"  @click="getCommentByMessageId()" ></i>
                </li>
            </ul>
        </div>


        <!--评论模块-->
          <el-drawer class="drawer"
            title="comment"
            :visible.sync="commentShow"
            :with-header="false">
                <!--一级评论输入框-->
                <div  class="parentCommentInp " style="background-color: #F7F9FB;">
                    <!-- <img  src="https://rpsm.oss-cn-chengdu.aliyuncs.com/1.jpg" alt="头像"> -->
                    <el-input class="textAreaBg"
                    type="textarea"
                    :rows="5" resize="none"
                    placeholder="请输入内容"
                    v-model="parentComemnt">
                    </el-input>
                    <el-button type="primary" class="commentPubBtn" round @click="addComment(null)">评论</el-button>
                </div>
                <!--评论-->
                <div>
                     
                    <div class="parentComment" v-for="parentCommend in commendList" 
                    
                    :key="parentCommend.comment_id">
                        
                        <div class="flex-between">
                            <div class="commentUserInfo flex-center">
                                <img  :src="parentCommend.user_avatar" alt="头像">
                                {{ parentCommend.username }} 
                                {{ parentCommend.comment_publish_time }} 
                            </div>
                            <div style="display: flex;">
                                
                                <span  class="childenCommentInputShow" slot="reference">
                                    <i class="el-icon-chat-dot-square"
                                    @click="isShowCommentInput(parentCommend.comment_id)"
                                    
                                    ></i>
                                </span>
                              
                               <div>
                                <i class="iconfont icon-dianzan" @click.once="addLikeComment(parentCommend.comment_id)"></i>
                                {{!parentCommend.comment_like?"":parentCommend.comment_like}}
                               </div>
                            </div> 
                        </div>
                        
                        {{ parentCommend.comment_content }}
                        <!-- 二级评论输入框 -->
                        <div :id="parentCommend.comment_id" class="childenCommentInput " >
                            <!-- <img class="flex-center" src="https://rpsm.oss-cn-chengdu.aliyuncs.com/1.jpg" alt="头像"> -->
                            <el-input class="textAreaBg"
                            type="textarea"
                            :rows="3" resize="none"
                            placeholder="请输入内容"
                            v-model="childenComment">
                            </el-input>
                            <el-button type="primary" class="commentPubBtn" round @click="addComment(parentCommend.comment_id)">评论</el-button>
                        </div>
                        <div class="childenComment" v-for="childenComment in parentCommend.childComments"
                        :key="childenComment.comment_id">
                            <div class="flex-between">
                                <div class="commentUserInfo flex-center">
                                    <img  :src="childenComment.user_avatar" alt="头像">
                                    {{ childenComment.username }} 
                                    {{ childenComment.comment_publish_time }}
                                </div>
                                <div class="likeInfo">
                                    <i class="iconfont icon-dianzan" @click.once="addLikeComment(childenComment.comment_id)"></i>
                                    {{!childenComment.comment_like?"":childenComment.comment_like}}
                                </div> 
                                
                            </div>
                            {{ childenComment.comment_content }}
                        </div>
                    </div>
                </div>
          </el-drawer>
    </div>
    
</template>

<style scoped>
.likeInfo{
    display: flex;
}
.likeInfo>i{
    margin-left: 10px;
}
.mssage>div[data-v-a60f0d8e] {
    margin-bottom: 0px;
}
.el-button{
    padding: 0;
}
.commentPubBtn{
   
    width: 76px;
    height: 26px;
}
.textAreaBg >>> .el-textarea__inner::placeholder{
    color: #a2a2a2;
}
.textAreaBg >>> .el-textarea__inner {
    background-color: #F7F9FB ; 
    border: none;
    border-radius: 10px;
    color: #000;
    
  }
  .parentCommentInp,.childenCommentInput{
    border-radius: 10px;
  }
    .childenCommentInput{
        margin: 10px 0;
        text-align: right;
        background-color: #F7F9FB;
        display: none;
    }
    .childenCommentInputShow{
        margin-right: 10px;
        display: none;
    }
    .parentComment:hover .childenCommentInputShow{
        display: block;
    }
    .flex-between{
        display: flex;
        justify-content: space-between;
    }
    .commentUserInfo{
        color: #777888;
        margin-bottom: 10px;
    }
    .parentComment{
        width:450px; 
        /*height:300px; */
       /* background-color: red; */
        margin: 30px;
       
    }
    .childenComment{
        width: 400px; 
        /* height:150px;  */
        /*background-color: rgb(235, 225, 225);*/
        padding: 10px 0 0 50px;
    }
    .parentCommentInp{
        width: 450px;
        margin: 30px;
        text-align: right;
    }
    
    .messageFonter{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 60px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .messageTitle{
        font-size: 25px;
    }
    .messageInfo{
        width: 100%;
        height: 60px;
        background-color: rgb(248,248,248);
    }
    .messageFonter ul li{
        font-size: 20px;
        margin: 0 10px;
    }
    .messageFonter ul li i{
        font-size: 20px;
    }
    .messageInfo ul,.messageFonter ul{
        display: flex;
        color: #999AAA;
    }
    
    .messageInfo li{
        font-size: 14px;
        margin: 20px 30px 10px 10px;
    }
    .messageContent{
        line-height: 50px;
        text-indent:2em;
    }
    .mssage>div{
        margin-bottom: 30px;
    }
    .flex-center{
        display: flex;
        align-items: center;
       
    }
    img{
        height: 30px; 
        width:30px;
        margin-right: 10px;
    }
</style>

<script>
import {baseurl} from '@/param'
export default {
    name:'BlogDetails',
    data() {
        return {
            commentShow:false,
            message:{
                message:{
                    message_title:'',
                },
                user:{
                    username:''
                }
            },
            messageId:"",
            parentComemnt:"",
            childenComment:"",
            userid:JSON.parse(sessionStorage.getItem('userInfo')).userid,
            commendList:[],
            isAttend:'',
            
        }
    },
    methods:{
        //评论添加点赞
        addLikeComment(id){
            axios.put(`${baseurl}/forum/commentLike/${id}`,{},{
                 headers:{
                     'Authorization':sessionStorage.getItem('Authorization')
                 } 
             }).then(res=>{
                 if(res.data.code){
                     this.getCommentByMessageId()
                 }
             }).catch(err=>console.log(err.message))
        },
        //添加评论
        addComment(parentCommentId){
            var flag = false
            if(parentCommentId){
                if(!this.childenComment){
                    alert("请填写评论内容")
                    return
                }
                flag = true
            }else{
                //没有添加以及评论
                if(!this.parentComemnt){
                    alert("请填写评论内容")
                    return
                }
            }
           
            axios.post(`${baseurl}/forum/addComment`,
            {
                comment_userid:this.userid,
                comment_content:this.childenComment==""?this.parentComemnt:this.childenComment,
                comment_parent_message_id:this.messageId,
                comment_parent_comment_id:parentCommentId
            }
            ,{
                headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                } 
            }).then(res=>{
                if(res.data.code){
                    alert("发布成功")
                    //添加子评论关闭文本域
                    if(flag){
                        this.isShowCommentInput(parentCommentId)
                    }
                    this.parentComemnt = ""
                    this.childenComment=""
                    this.getCommentByMessageId()
                }else{
                    alert("发布失败")
                }
            }).catch(err=>console.log(err.message))
         },
         //获取评论
         getCommentByMessageId(){
             this.commentShow = true
             axios.get(`${baseurl}/forum/queryComment/${this.message.message.message_id}`,{
                 headers:{
                     'Authorization':sessionStorage.getItem('Authorization')
                 } 
             }).then(res=>{
                 if(res.data.code){
                     this.commendList = res.data.data
                 }
             }).catch(err=>console.log(err.message))
         },
         //添加点赞
         addLike(id){
             axios.put(`${baseurl}/forum/messageLike/${id}`,{},{
                 headers:{
                     'Authorization':sessionStorage.getItem('Authorization')
                 } 
             }).then(res=>{
                 if(res.data.code){
                     this.getMessage()
                 }
             }).catch(err=>console.log(err.message))
         },
         //添加不喜欢
         addUnlike(id){
             axios.put(`${baseurl}/forum/messageUnlike/${id}`,{},{
                 headers:{
                     'Authorization':sessionStorage.getItem('Authorization')
                 } 
             }).then(res=>{
                 if(res.data.code){
                     this.getMessage()
                 }
             }).catch(err=>console.log(err.message))
        },
        //添加关注
        addAtteontion(toid){
           
            if(this.userid == toid){
                alert("不能自己关注自己哦！！！")
                return
            }
            axios.post(`${baseurl}/forum/addAttention`,{
                from_id:this.userid,
                to_id:toid,
                // attend_date:new Date()
            },{
                headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                } 

            }).then(res=>{
                if(res.data.code){
                    alert("关注成功")
                }else{
                    alert(res.data.message)
                }
            }).catch(err=>console.log(err.message))
        },
        //获取帖子
        getMessage(){
            axios.get (`${baseurl}/forum/queryMessage`,{
                params:{
                    messageId:this.messageId,
                    fromId:this.userid
                },
                headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                } 
            })
            .then(res=>{
                if(res.data.code){
                    //虽然只获取到一条记录，但是res.data.data是一个数组，用对象接收不了，所以接收第一个
                    this.message = res.data.data[0]
                    // this.message = res.data.data
                    if(!this.message.attention){
                        this.isAttend = 0
                    }else{
                        this.isAttend = this.message.attention.isAttend
                    }
                }
            }).catch(err=>console.log(err))
        },
        isShowCommentInput(id){
            var count = 0
            for(const c of this.commendList){
                if(c.comment_id == id){  
                    count =  c.total+=1
                }
            }
          
            if(count%2 != 0){
                this.showCommentInput(id)
            }else{
                this.noneCommentInput(id)
            }
            
        },
        //展示二级评论输入框
        showCommentInput(id){
            document.getElementById(id).style.display='block'
        },
        //隐藏二级评论输入框
        noneCommentInput(id){
             document.getElementById(id).style.display='none'
        },
    },
    mounted(){
        this.messageId = this.$route.query.messageId
        this.getMessage()
    }
}
</script>